<template>
	<view class="con">
		<view class="flex-ju-b " :style="{paddingTop:shh+5+'px'}">
			<uni-icons @click="back()" type="left" size="22" color="#000"></uni-icons>
			<view class="flex-a-i">
				<image @click="navto('/pages/search')" mode="widthFix" class="flex image width40" src="/static/sou.png">
				</image>
				<view @click="navto('settings?type=1')" class="flex-a-i size24 borderECEDEE color666 ml30 ra20 pg5-20">
					设置
				</view>
			</view>
			<view></view>
		</view>

		<view class=" mt20">
			<swiper @change="swchange" class="swiperc">
				<swiper-item v-for="(item,index) in info.reviewWordDto" :key="index">
					<scroll-view scroll-y class=" bgfff ra50">
						<view v-if="info.reviewWordDto.length" @click="tapdisplay" class=" pg30 swipers">
							<view class="flex-ju-b ">
								<view>剩余{{item.wordCount}}</view>
								<view class="flex-a-i"></view>
							</view>
							<view class="flex-ju-c size72 bold mt50">{{item.word}}
							</view>

							<view class="flex-ju-c color666 size24 mt20">
								<view @click.stop="voice(item.ukUrl)" class="flex-a-i">{{item.ukPhonetic}}
									<image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image>
								</view>
								<view @click.stop="voice(item.usUrl)" class="ml50 flex-a-i">{{item.usPhonetic}}
									<image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image>
								</view>
							</view>

							<view v-if="info.isCard" class="flex-ju-c mt30">
								<image class="flex image wh340-450 ra20" :src="item.card"></image>
							</view>
							<view v-else class="width600 mt80 ">
								<view class="flex-ju-c size24 mt30 color666">
									尝试回想释义
								</view>
								<view class="flex-ju-c size24  color666">
									点击空白处查看单词图片
								</view>
							</view>

							<template v-if="info.isCard||info.isSentence">
								<view v-if="info.isSentence" v-for="(items,a) in item.exampleInfoDos" :key="a">
									<view class="flex mt20">
										<view class="bold">例句</view>
										<view class="size24 color666 ml10 flex1 mt8">
											{{items.chinaExample}}
										</view>
									</view>
									<view class="flex mt10">
										<view class="flex mr10">
											<image @click.stop="voice(items.exampleAudioUrl)" mode="widthFix"
												src="/static/yuyin.png" class="image flex mt10 width36"></image>
										</view>
										<view>
											<mp-html :content="items.englishExample"></mp-html>
										</view>
									</view>
								</view>
								<view v-else class="width600 mt30 size28">
									<view class="flex-ju-c size24 mt30 color666">
										仍未想起
									</view>
									<view class="flex-ju-c size24  color666">
										点击空白处查看例句
									</view>
								</view>
							</template>
						</view>
						<view v-else class="flex-ju-c bgf9f9f9">已复习完成</view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<view v-if="info.reviewWordDto.length" class="flex-ju-b width92vw posiab bottom0 bot "
				:style="{paddingBottom:bhh+'px'}">
				<view @click="tapdisplay" class="wh240-120 ra20 colorfff flex-ju-c size40 bg000">不认识</view>
				<view @click="behead" class="wh130-130 ra130 flex-ju-c bgfff">
					<image mode="widthFix" class="flex image width130" src="/static/zan.png"></image>
				</view>
				<view @click="toknow" class="wh240-120 ra20 colorfff flex-ju-c size40 bgFD2F55">认识</view>
			</view>

		</view>


		<!-- <uni-popup ref="cang" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0" >
				<view class="con size28">
					<view class="flex-ju-c border-bECEDEE height100">隐藏讲解</view>
					<view class="flex-ju-c border-bECEDEE height100">隐藏单词</view>
					<view class="flex-ju-c border-bECEDEE height100">完整显示</view>
					<view @click="$refs.cang.close()" class="flex-ju-c border-bECEDEE height100 color666">取消</view>
				</view>
			</uni-popup> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				current: 0,
				isCard: 0,
				isSentence: 0,
				isSeriesWord: 0
			}
		},
		onLoad() {
			this.getinfo()
		},
		mounted() {

		},
		methods: {

			toknow() {
				uni.navigateTo({
					url: "words_detail?id=" + this.info.reviewWordDto[this.current].wordId
				})
			},
			handleTouchStart(event) {
				// 记录触摸开始的X坐标
				this.startX = event.touches[0].clientX;
			},
			handleTouchEnd(event) {
				// 记录触摸结束的X坐标
				this.endX = event.changedTouches[0].clientX;
				this.detectSwipe();
			},
			detectSwipe() {
				const diffX = this.endX - this.startX;
				const threshold = 50; // 滑动判定阈值

				if (Math.abs(diffX) < threshold) {
					// 滑动距离不足，不判定为有效滑动
					// this.swipeDirection = '未检测到有效滑动';
					return;
				}

				if (diffX > 0) {
					// this.swipeDirection = '右滑';
					this.onSwipeRight(); // 触发右滑回调
				} else {
					// this.swipeDirection = '左滑';
					this.onSwipeLeft(); // 触发左滑回调
				}
			},
			onSwipeLeft() {
				// 左滑后的处理逻辑，例如切换至下一题:ml-citation{ref="3" data="citationList"}

				this.noknow()
				console.log('检测到左滑手势');
			},
			onSwipeRight() {
				// 右滑后的处理逻辑，例如切换至上一题:ml-citation{ref="3" data="citationList"} 或返回上一页:ml-citation{ref="2" data="citationList"}

				this.know()
				console.log('检测到右滑手势');
			},



			getinfo() {
				this.http('/api/review/reviewInfo', {
					reviewType: 1
				}, 'post').then(res => {
					if (res.data.reviewWordDto) {
						res.data.reviewWordDto.map(items => {
							items.exampleInfoDos.map(item => {
								item.englishExample = this.wreplace(items.word, item
									.englishExample)
							})
						})

						// res.data.reviewWordDto.exampleInfoDos.map(item=>{
						// 	item.englishExample = this.wreplace(res.data.reviewWordDto.word,item.englishExample)
						// })
						this.isCard = res.data.isCard
						this.isSentence = res.data.isSentence
						this.isSeriesWord = res.data.isSeriesWord
						this.info = res.data
					} else {
						uni.redirectTo({
							url: "fuxisuu"
						})
					}

				})
			},
			swchange(e) {
				this.current = e.detail.current

				if (this.isCard) {
					this.info.isCard = 1
				} else {
					this.info.isCard = 0
				}
				if (this.isSentence) {
					this.info.isSentence = 1
				} else {
					this.info.isSentence = 0
				}

			},
			tapdisplay() {
				if (this.info.isCard && this.info.isSentence) {
					uni.navigateTo({
						url: "words_detail?id=" + this.info.reviewWordDto[this.current].wordId
					})
					return
				}
				if (this.info.isCard) {
					this.info.isSentence = 1
				} else {
					this.info.isCard = 1
				}
			},
			adduserReview(reviewStatus) {
				this.http('/api/userReview/add', {
					entryId: this.info.reviewWordDto[this.current].wordId,
					reviewType: 1,
					reviewStatus
				}, 'post').then(res => {
					this.toast('已斩')
					// this.getinfo()
				})
			},
			noknow() {

				this.adduserReview(3)
			},
			know() {
				this.adduserReview(1)
			},
			behead() {
				this.adduserReview(2)
			},
		}
	}
</script>

<style>
	.swiperc {
		height: calc(100vh - 150rpx);
	}

	.swipers {
		/* width: 80vw; */
		height: calc(100vh - 380rpx);
	}

	page {
		background: #f9f9f9;
	}
</style>